<script setup lang="ts">
import vChart from "@/views/monitor/server/components/VChart.vue";
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import { timeSlot } from "@/utils";
// let data = [];
// const times = timeSlot(15);
function getRandomNumberInRange(start, end) {
  const random = Math.random() * (end - start + 1) + start;
  return parseFloat(random.toFixed(2));
}
// times.forEach(item => {
//   let c = [
//     item,
//     getRandomNumberInRange(4.9, 5), // 最大值
//     getRandomNumberInRange(3.5, 4.8), // 实际值
//     getRandomNumberInRange(3, 3.5), // 最小值
//     getRandomNumberInRange(0, 6),
//     getRandomNumberInRange(0, 6),
//     getRandomNumberInRange(0, 6)
//   ];
//   data.push(c);
// });
// prettier-ignore
var rawData = [
  [2002, 38, 14, 14, 14, 26, 26, 26, 26, 26, 26, 26, 26],
  [2003, 38, 24, 28, 24, 33, 37, 30, 25, 13, 14, 6, 6],
  [2004, 38, 31, 36, 28, 37, 43, 35, 30, 13, 13, 7, 7],
  [2005, 38, 32, 38, 34, 39, 48, 38, 29, 14, 14, 8, 8],
  [2006, 38, 38, 47, 33, 44, 57, 41, 39, 16, 16, 9, 8],
  [2007, 38, 35, 49, 34, 43, 57, 41, 37, 20, 17, 9, 10],
  [2008, 38, 32, 37, 30, 35, 44, 38, 31, 16, 17, 8, 7],
  [2009, 38, 34, 41, 33, 39, 47, 44, 32, 17, 17, 9, 8],
  [2010, 38, 35, 46, 40, 47, 61, 47, 41, 20, 18, 9, 10],
  [2011, 38, 39, 55, 38, 55, 67, 53, 41, 19, 20, 11, 11],
  [2012, 38, 48, 60, 49, 57, 79, 62, 54, 26, 26, 13, 11]
];
var dataByMonth = [];
// prettier-ignore
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
rawData.forEach(function (entry, yearIndex) {
  entry.forEach(function (value, index) {
    if (index) {
      var monthIndex = index - 1;
      var monthItem = (dataByMonth[monthIndex] = dataByMonth[monthIndex] || []);
      monthItem[0] = monthIndex;
      monthItem[yearIndex + 1] = value;
    }
  });
});
console.log(dataByMonth, "rawData");
var averageByMonth = [];
dataByMonth.forEach(function (entry, index) {
  var sum = 0;
  entry.forEach(function (value, index) {
    index && (sum += value);
  });
  averageByMonth.push([index, sum / (entry.length - 1)]);
});
function renderTrendItem(params, api) {
  var categoryIndex = api.value(0);
  var unitBandWidth = (api.size([0, 0])[0] * 0.85) / (rawData.length - 1);
  var points = rawData.map(function (entry, index) {
    var value = api.value(index + 1);
    var point = api.coord([categoryIndex, value]);
    point[0] += unitBandWidth * (index - rawData.length / 2);
    return point;
  });
  return {
    type: "polyline",
    transition: ["shape"],
    shape: {
      points: points
    },
    style: api.style({
      fill: null,
      stroke: api.visual("color"),
      lineWidth: 2
    })
  };
}
function renderAverageItem(param, api) {
  var bandWidth = api.size([0, 0])[0] * 0.85;
  var point = api.coord([api.value(0), api.value(1)]);
  return {
    type: "line",
    transition: ["shape"],
    shape: {
      x1: point[0] - bandWidth / 2,
      x2: point[0] + bandWidth / 2,
      y1: point[1],
      y2: point[1]
    },
    style: api.style({
      fill: null,
      stroke: api.visual("color"),
      lineWidth: 2
    })
  };
}
const options = ref({
  tooltip: {},
  title: {
    text: "Sales Trends by Year within Each Month",
    subtext: "Sample of Cycle Plot",
    left: "center"
  },
  legend: {
    top: 70,
    data: ["Trend by year (2002 - 2012)", "Average"]
  },
  dataZoom: [
    {
      type: "slider",
      labelFormatter: ""
    },
    {
      type: "inside"
    }
  ],
  grid: {
    bottom: 70,
    top: 120
  },
  xAxis: {
    data: months
  },
  yAxis: {
    boundaryGap: [0, "20%"]
  },
  series: [
    {
      type: "custom",
      name: "Average",
      renderItem: renderAverageItem,
      encode: {
        x: 0,
        y: 1
      },
      data: averageByMonth
    },
    {
      type: "custom",
      name: "Trend by year (2002 - 2012)",
      renderItem: renderTrendItem,
      encode: {
        x: 0,
        y: rawData.map(function (entry, index) {
          return index + 1;
        })
      },
      data: dataByMonth
    }
  ]
});

var rawData2 = new Array(96).fill(1).map((item, index) => {
  return [
    index,
    ...new Array(3).fill(1).map(c => {
      return getRandomNumberInRange(14, 38);
    })
  ];
});
console.log(rawData2, "rawData2");
var months2 = timeSlot(15);
console.log(months2, "months2");
var dataByMonth2 = [];
rawData2.forEach(function (entry, yearIndex) {
  entry.forEach(function (value, index) {
    if (index) {
      var monthIndex = index - 1;
      var monthItem = (dataByMonth2[monthIndex] =
        dataByMonth2[monthIndex] || []);
      monthItem[0] = monthIndex;
      monthItem[yearIndex + 1] = value;
    }
  });
});
console.log(dataByMonth2, "dataByMonth2");
var averageByMonth2 = [];
dataByMonth2.forEach(function (entry, index) {
  var sum = 0;
  entry.forEach(function (value, index) {
    index && (sum += value);
  });
  averageByMonth2.push([index, sum / (entry.length - 1)]);
});
function renderTrendItem2(params, api) {
  var categoryIndex = api.value(0);
  var unitBandWidth = (api.size([0, 0])[0] * 0.9) / 6;

  let values = [28, 18, 15];
  var points = [
    api.coord([categoryIndex, 28]).map((item, index) => {
      if (index === 0) {
        return item - unitBandWidth;
      } else {
        return item;
      }
    }),
    api.coord([categoryIndex, 28]).map((item, index) => {
      if (index === 0) {
        return item - 2 * unitBandWidth;
      } else {
        return item;
      }
    }),
    api.coord([categoryIndex, 28]).map((item, index) => {
      if (index === 0) {
        return item - 3 * unitBandWidth;
      } else {
        return item;
      }
    }),
    api.coord([categoryIndex, 28]).map((item, index) => {
      if (index === 0) {
        return item + 1 * unitBandWidth;
      } else {
        return item;
      }
    }),
    api.coord([categoryIndex, 28]).map((item, index) => {
      if (index === 0) {
        return item + 2 * unitBandWidth;
      } else {
        return item;
      }
    }),
    api.coord([categoryIndex, 28]).map((item, index) => {
      if (index === 0) {
        return item + 3 * unitBandWidth;
      } else {
        return item;
      }
    }),
    api.coord([categoryIndex, 28]).map((item, index) => {
      if (index === 0) {
        return item;
      } else {
        return item;
      }
    }),
    api.coord([categoryIndex, 15]),
    api.coord([categoryIndex, 15]).map((item, index) => {
      if (index === 0) {
        return item - unitBandWidth;
      } else {
        return item;
      }
    }),
    api.coord([categoryIndex, 15]).map((item, index) => {
      if (index === 0) {
        return item - 2 * unitBandWidth;
      } else {
        return item;
      }
    }),
    api.coord([categoryIndex, 15]).map((item, index) => {
      if (index === 0) {
        return item - 3 * unitBandWidth;
      } else {
        return item;
      }
    }),
    api.coord([categoryIndex, 15]).map((item, index) => {
      if (index === 0) {
        return item + 1 * unitBandWidth;
      } else {
        return item;
      }
    }),
    api.coord([categoryIndex, 15]).map((item, index) => {
      if (index === 0) {
        return item + 2 * unitBandWidth;
      } else {
        return item;
      }
    }),
    api.coord([categoryIndex, 15]).map((item, index) => {
      if (index === 0) {
        return item + 3 * unitBandWidth;
      } else {
        return item;
      }
    }),
    api.coord([categoryIndex, 15]).map((item, index) => {
      if (index === 0) {
        return item;
      } else {
        return item;
      }
    })
  ];
  console.log(points, "points");
  // for(let i=0;i<6;i++) {
  //   let value = api.value(i%values.length);
  //   console.log(value, 'value')
  //   let point = api.coord([categoryIndex, value]);
  //   point[0] += unitBandWidth * (i - rawData2.length / 2);
  //   points.push(point)
  // }

  // var points = rawData2.map(function (entry, index) {
  //   var value = api.value(index + 1);
  //   var point = api.coord([categoryIndex, value]);
  //   point[0] += unitBandWidth * (index - rawData2.length / 2);
  //   return point;
  // });
  return {
    type: "polyline",
    transition: ["shape"],
    shape: {
      points: points
    },
    style: api.style({
      fill: null,
      stroke: api.visual("color"),
      lineWidth: 2
    })
  };
}
const options2 = ref({
  tooltip: {},
  title: {
    text: "Sales Trends by Year within Each Month",
    subtext: "Sample of Cycle Plot",
    left: "center"
  },
  legend: {
    top: 70,
    data: ["Trend by year (2002 - 2012)", "Average"]
  },
  dataZoom: [
    {
      type: "slider",
      labelFormatter: ""
    },
    {
      type: "inside"
    }
  ],
  grid: {
    bottom: 70,
    top: 120
  },
  xAxis: {
    data: months2
  },
  yAxis: {
    boundaryGap: [0, "20%"]
  },
  series: [
    {
      type: "custom",
      name: "Trend by year (2002 - 2012)",
      renderItem: renderTrendItem2,
      encode: {
        x: 0,
        y: rawData2.map(function (entry, index) {
          return index + 1;
        })
      },
      data: rawData2
    }
  ]
});
</script>

<template>
  <div class="flex">
    <div class="w-[20px] h-[400px]">
      <vChart :options="options" />
    </div>
    <div class="flex-1 h-[400px]">
      <vChart :options="options2" />
    </div>

    <div class="box">
      <h2>⚡</h2>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@property --rotate {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.box {
  position: relative;
  width: 300px;
  height: 300px;
  background:
    linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
    linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
    linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
    linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
  background-position:
    0 0,
    0 100%,
    0 0,
    100% 0;
  background-size:
    32px 4px,
    32px 4px,
    4px 32px,
    4px 32px;
  animation: linear-gradient-move 0.3s infinite linear;
}

.box:hover {
  animation: linear-gradient-move 0.3s infinite linear;
}

@keyframes linear-gradient-move {
  100% {
    background-position:
      32px 0,
      -32px 100%,
      0 -32px,
      100% 32px;
  }
}
</style>
